<template>
  <article class="detail-article" ref="article" :class="isSystem ? '' : 'system'">
    <!--link-->
    <link-box v-if="blog.id == 2" v-bind="$attrs" v-on="$listeners"></link-box>
    <!--content-->
    <div id="blog" class="content markdown-body" v-html="htmlContent"></div>
    <!--catalog-->
    <div class="toc-container" v-show="isSystem">
      <div class="toc"></div>
    </div>
    <copyright v-if="shareStatement" v-bind="$attrs"></copyright>
    <!--tag-->
    <div class="tag-list">
      <router-link v-for="item in blog.tagList"
        :to="'/tag/' + item.id"
        :key="item.id + '-' + item.name"
        :style="{'color':item.color}"
      >{{item.name}}</router-link>
    </div>
    <reward v-if="appreciation"></reward>
    <!--comments-->
    <p class="comments-head" v-if="commentabled">
      <span>评论</span>
    </p>
    <div v-show="commentabled" id="vcomments" ref="vcomments"></div>
  </article>
</template>

<script>
import { updateBlogComments } from 'service'
import { formatDate, initToc } from 'utils/utils'
import Prism from 'prismjs'
import Valine from 'valine'

export default {
  name: 'Detail',
  props: {
    type: {},
    blog: {
      type: Object,
      default() {
        return {};
      }
    },
    shareStatement: false,
    appreciation: false,
    commentabled: false
  },
  mounted() {
    this.initBlogModule()
    this.$watch('blog', this.initBlogModule, {
      deep: true,
    })
  },
  computed: {
    createTime() {
      return formatDate(new Date(this.blog.createTime), "yyyy-MM-dd")
    },
    htmlContent() {
      return this.blog.content
    },
    isSystem() {
      return this.blog.id !== 1 && this.blog.id !== 2
    }
  },
  deactivated() {
    this.$emit('clearBlog')
    tocbot.destroy()
  },
  methods: {
    initBlogModule() {
      if(JSON.stringify(this.blog) !== '{}' && this.blog !== null) {
        // 加载目录
        tocbot.init({
          tocSelector: '.toc',
          contentSelector: '#blog',
          headingSelector: 'h1, h2, h3',
        })
        initToc()
        // 加载评论系统
        this.getComment()
      }  
    },
    getComment() {
      Valine({
        el: '#vcomments',
        appId: 'vJv21g92zHDNSyD60VsPJCXy-gzGzoHsz',
        appKey: '56MxoGN5xSqCvjVYjVWIxUqL',
        path: window.location.pathname,
        avatar: 'retro',
        placeholder: '昵称输入QQ号可自动补全信息；支持 Markdown',
        enableQQ: true,
        recordIP: true,
      })
      // 获取输入的昵称、邮箱、评论内容
      let nick = document.getElementsByName('nick')[0]
      let mail = document.getElementsByName('mail')[0]
      let textArea = document.getElementById('veditor')
      // 邮箱正则
      const regExp = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
      // $('.vrow .status-bar')
      let validateMsg = document.getElementsByClassName('status-bar')[0]
      let btn = document.getElementsByClassName('vsubmit')[0]
      let blogId = this.blog.id
      let comments = 0
      if (btn) {
        btn.addEventListener('click', async e => {
          let nickText = nick.value
          let mailText = mail.value
          let textDesc = textArea.value
          let isok = regExp.test(mailText)
          if (nickText.trim() === '') {
            this.$Message.warning('先输入昵称哦~~')
          } else if (mailText.trim() && !isok) {
            this.$Message.warning('邮箱格式不正确哦~~')
          } else if (textDesc.trim() === '') {
            this.$Message.warning('先输入评论哦~~')
          } else {
            btn.click()
            setTimeout(function() {
              let count = document.getElementsByClassName('vcount')[0]
              comments = count.getElementsByTagName('span')[0].innerText
              // 更新评论数
              updateBlogComments(blogId, comments)
            }, 500)
          }
        })
      }
    }
  },
  watch: {
    htmlContent(newValue, oldValue) {
      this.$nextTick(() => {
        Prism.highlightAll()
      })
    }
  },
  components: {
    "link-box": () => import("components/common/LinkBox"),
    "copyright": () => import("components/common/Copyright"),
    "reward": () => import("components/common/Reward")
  }
}
</script>

<style lang='scss' scoped>
@import '~assets/css/markdown.css';
@import '~assets/css/prism.css';
article {
  position: relative;
  max-width: 800px;
  padding: 1rem 1.5rem;
  margin: 1rem auto;
  background-color: #fff;
  animation: main 0.3s linear;
  &.system {
    margin: 1rem;
    max-width: 100%;
    box-shadow: 0 2px 9px rgba(31,45,61,.15);
    border-radius: 8px;
  }
  .content {
    margin: 26px 0;
  }
  .tag-list {
    margin: 12px 0 0;
    white-space: nowrap;
    overflow: hidden;
    color: transparent;
    a {
      display: inline-block;
      font-size: 14px;
      line-height: 25px;
      padding: 0 10px;
      margin-right: 10px;
      position: relative;
      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        color: inherit;
        background: currentColor;
        border-radius: 20px;
        opacity: .25;
        transition: .5s;
      } 
      &:hover:before {
        opacity: 0.5;
      }
    }
  }
}
/* 评论样式 */
.comments-head {
  &::before {
    position: absolute;
    top: -7px;
    left: 0;
    font-size: 24px;
    font-weight: bold;
    color: #eb5055;
    content: '|';
  }
  position: relative;
  margin-top: 52px;
  margin-bottom: 16px;
  font-size: 1rem;
  color: #24292e;
  span {
    margin-left: 12px;
  }
}
</style>
<style lang='scss'>
#vcomments {
  .vcards {
    .vimg {
      transition: all 0.5s;
      &:hover {
        transform: rotate(360deg);
      }
    }
  }
}
/* 目录 */
.toc-container {
  position: fixed;
  height: calc(100%  - 160px); 
  width: 200px;
  top: 400px;
  transform: translateX(0);
  right: calc((100% - 950px - 250px)/2);
  padding: 10px 0;
  .toc {
    li{
      padding-left: 8px !important;
      line-height: 24px !important;
      a:before {
        margin-top: 0;
      }
    }
  }
}
</style>